<template>
    <div class="body">
        <div class="title">{{articleDetail.title}}</div>
        <div class="info">
            <div class="left">
                <div class="author">
                    <span>作者：</span>
                    <span>{{articleDetail.loginname}}</span>
                </div>
                <div class="tags" v-if="tagshow">
                    <el-tag type="warning" style="margin-right: 5px" size="mini" v-for="(tag) in articleDetail.tags" :key="tag" >{{tag}}</el-tag>
                </div>
            </div>

            <div class="createtime">
                {{dateFormat('YYYY-mm-dd',articleDetail.createtime)}}
            </div>

        </div>
        <div class="content" v-html="articleDetail.content" @click="imageChgange($event)"></div>
        <el-dialog title="图片预览(再次点击放大)" :visible.sync="dialogTableVisible" width="680px">
            <el-image
                    style="width: 600px; height: 400px"
                    :src="url"
                    :preview-src-list="srcList">
            </el-image>
        </el-dialog>
    </div>
</template>

<script>
    import api from "../../../utils/axios/api";
    export default {
        name: "newsDetail",
        data(){
          return{
              dialogTableVisible:false,
              url:"",
              srcList:[],
              id:0,
              articleDetail:{
                  createtime:"",
                  title:"",
                  loginname:"",
                  visitor_volume:0,
                  page_view:0,
                  content:"",
                  categoryname:"",
                  tags:[]
              }
          }
        },
        methods:{
            async getArticleById(){
                // let _this=this;
                let param={id:this.$route.params.id};

                let {data:res}=await api.getArticleById(param);
                if(res.code==0){
                    this.articleDetail.title=res.data.title;
                    this.articleDetail.content=res.data.content;
                    this.articleDetail.tags=res.data.tags.split(",");
                    this.articleDetail.loginname=res.data.user.loginName;
                    this.articleDetail.categoryname=res.data.category.category;
                    this.articleDetail.visitor_volume=res.data.visitorVolume;
                    this.articleDetail.page_view=res.data.pageView;
                    this.articleDetail.createtime=res.data.createTime;
                }
            },
            imageChgange(e) {
                if (e.target.nodeName == 'IMG') {
                    this.dialogTableVisible=true;
                    this.srcList=[];
                    this.url=e.target.currentSrc;
                    this.srcList.push(e.target.currentSrc);

                } else {
                    return
                }
            },
            dateFormat(fmt, date) {
                let ret = "";
                date = new Date(date);
                const opt = {
                    'Y+': date.getFullYear().toString(), // 年
                    'm+': (date.getMonth() + 1).toString(), // 月
                    'd+': date.getDate().toString(), // 日
                    'H+': date.getHours().toString(), // 时
                    'M+': date.getMinutes().toString(), // 分
                    'S+': date.getSeconds().toString() // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                }
                for (let k in opt) {
                    ret = new RegExp('(' + k + ')').exec(fmt)
                    if (ret) {
                        fmt = fmt.replace(
                            ret[1],
                            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
                        )
                    }
                }
                return fmt
            }

        },
        mounted() {
            this.getArticleById();
        },
        computed:{
            tagshow:function(){
                let self=this;
                return self.articleDetail.tags.length>1;
            }
        }
    }
</script>

<style scoped lang="scss">
    .body{
        margin: 0 auto;
        background-color: #b3c0d1;
        width: 750px;
        .title{
            font-family: "Courier New", Courier, monospace;
            font-size: 40px;
            font-weight: bold;
            height: 100px;
            line-height: 100px;
        }
        .info{
            color: #909399;
            font-size: 16px;
            margin-top: 15px;
            height: 20px;
            display: flex;
            justify-content:space-between;
            .left{
                display: flex;
                justify-content:flex-start ;
                .tags{
                    height: 20px;
                    margin: 0 10px 0 10px;
                }
                .author{
                    line-height: 20px;
                    margin: 0 10px 0 50px;
                }
            }

            .createtime{
                margin-right: 50px;
            }


        }
    }
</style>